<template>
  <div class="order-container">
    <div class="order-header">
      <p style="padding: 10px 50px 10px ;text-align: left;font-weight:bold">购物订单</p>
      <!-- <div style="height:2px;background-color:#909399"></div> -->
      <hr />
    </div>
    <div class="order-content">
      <el-table class="order-table" :data="orderList" :row-class-name="tableRowClassName" border>
        <el-table-column prop="shopName" label="商铺名称" width="180">
        </el-table-column>
        <el-table-column prop="productsDisplay" label="商品名称" width="180">
        </el-table-column>
        <el-table-column prop="createtime" label="下单时间">
        </el-table-column>
        <el-table-column prop="totalCost" label="订单总金额">
        </el-table-column>
        <el-table-column prop="status" label="订单状态">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
  
<script scoped>
export default {
  data() {
    return {
      orders: [
        {
          id: 1514031117929,
          senderid: 1513603791659,
          courierid: 0,
          receiverid: 1513939308414,
          productcost: 11.6,
          deliverycost: 10.0,
          totalcost: 10.0,
          status: 0,
          createtime: 1514031117687
        },
        {
          id: 1514031663385,
          senderid: 1513603791659,
          courierid: 0,
          receiverid: 1513939308414,
          productcost: 14.6,
          deliverycost: 10.0,
          totalcost: 10.0,
          status: 0,
          createtime: 1514031663194
        },
        {
          id: 1514031719921,
          senderid: 1513603791659,
          courierid: 0,
          receiverid: 1513939308414,
          productcost: 14.6,
          deliverycost: 10.0,
          totalcost: 10.0,
          status: 0,
          createtime: 1514031719705
        },
        {
          id: 1514031783863,
          senderid: 1513603791659,
          courierid: 0,
          receiverid: 1513939308414,
          productcost: 14.6,
          deliverycost: 10.0,
          totalcost: 10.0,
          status: 0,
          createtime: 1514031783640
        },
        {
          id: 1514032859646,
          senderid: 1513603791659,
          courierid: 0,
          receiverid: 1513939308414,
          productcost: 2.0,
          deliverycost: 10.0,
          totalcost: 10.0,
          status: 0,
          createtime: 1514032859460
        },
        {
          id: 1514033029087,
          senderid: 1513603791659,
          courierid: 0,
          receiverid: 1513939308414,
          productcost: 60.0,
          deliverycost: 10.0,
          totalcost: 10.0,
          status: 0,
          createtime: 1514033028874
        },
        {
          id: 1514033246528,
          senderid: 1513603791659,
          courierid: 0,
          receiverid: 1513939308414,
          productcost: 4.0,
          deliverycost: 10.0,
          totalcost: 10.0,
          status: 0,
          createtime: 1514033246297
        },
        {
          id: 1514034046184,
          senderid: 1513603791659,
          courierid: 0,
          receiverid: 1513939308414,
          productcost: 6.0,
          deliverycost: 10.0,
          totalcost: 10.0,
          status: 0,
          createtime: 1514034045983
        },
        {
          id: 1514034288716,
          senderid: 1513603791659,
          courierid: 0,
          receiverid: 1513939308414,
          productcost: 6.0,
          deliverycost: 10.0,
          totalcost: 10.0,
          status: 0,
          createtime: 1514034288526
        },
        {
          id: 1514034450626,
          senderid: 1513603791659,
          courierid: 0,
          receiverid: 1513939308414,
          productcost: 6.0,
          deliverycost: 10.0,
          totalcost: 10.0,
          status: 0,
          createtime: 1514034450420
        },
        {
          id: 1514034594055,
          senderid: 1513603791659,
          courierid: 0,
          receiverid: 1513939308414,
          productcost: 6.0,
          deliverycost: 10.0,
          totalcost: 10.0,
          status: 0,
          createtime: 1514034593858
        },
        {
          id: 1514034709041,
          senderid: 1513603791659,
          courierid: 0,
          receiverid: 1513939308414,
          productcost: 6.0,
          deliverycost: 10.0,
          totalcost: 10.0,
          status: 0,
          createtime: 1514034708840
        },
        {
          id: 1514034836904,
          senderid: 1513603791659,
          courierid: 0,
          receiverid: 1513939308414,
          productcost: 6.0,
          deliverycost: 10.0,
          totalcost: 10.0,
          status: 0,
          createtime: 1514034836710
        },
        {
          id: 1514037579332,
          senderid: 1513603791659,
          courierid: 0,
          receiverid: 1513939308414,
          productcost: 5.8,
          deliverycost: 10.0,
          totalcost: 10.0,
          status: 0,
          createtime: 1514037578049
        },
        {
          id: 1514038673476,
          senderid: 1513603791659,
          courierid: 1513659331281,
          receiverid: 1513939308414,
          productcost: 5.8,
          deliverycost: 10.0,
          totalcost: 10.0,
          status: 6,
          createtime: 1514038673247
        },
        {
          id: 1514084277712,
          senderid: 1513603791659,
          courierid: 1514092257623,
          receiverid: 1514080183324,
          productcost: 14.6,
          deliverycost: 15.41,
          totalcost: 30.01,
          status: 6,
          createtime: 1514084277257
        },
        {
          id: 1514084837583,
          senderid: 1513603791659,
          courierid: 1514092257623,
          receiverid: 1514080183324,
          productcost: 4.2,
          deliverycost: 15.41,
          totalcost: 19.61,
          status: 6,
          createtime: 1514084837130
        }
      ],
      orderItems: [
        {
          id: 1514031784045,
          orderid: 1514031783863,
          productid: 1513664361443,
          amount: 2,
          productname: '清风软抽',
          productprice: 5.8
        },
        {
          id: 1514031784068,
          orderid: 1514031783863,
          productid: 1513664401097,
          amount: 1,
          productname: '可口可乐',
          productprice: 3.0
        },
        {
          id: 1514032859807,
          orderid: 1514032859646,
          productid: 1513664494923,
          amount: 1,
          productname: '便利贴',
          productprice: 2.0
        },
        {
          id: 1514033029312,
          orderid: 1514033029087,
          productid: 1513664438350,
          amount: 1,
          productname: '光明纯牛奶',
          productprice: 60.0
        },
        {
          id: 1514033246753,
          orderid: 1514033246528,
          productid: 1513664494923,
          amount: 2,
          productname: '便利贴',
          productprice: 2.0
        },
        {
          id: 1514034047319,
          orderid: 1514034046184,
          productid: 1513664401097,
          amount: 2,
          productname: '可口可乐',
          productprice: 3.0
        },
        {
          id: 1514034288935,
          orderid: 1514034288716,
          productid: 1513664401097,
          amount: 2,
          productname: '可口可乐',
          productprice: 3.0
        },
        {
          id: 1514034451801,
          orderid: 1514034450626,
          productid: 1513664401097,
          amount: 2,
          productname: '可口可乐',
          productprice: 3.0
        },
        {
          id: 1514034594277,
          orderid: 1514034594055,
          productid: 1513664401097,
          amount: 2,
          productname: '可口可乐',
          productprice: 3.0
        },
        {
          id: 1514034709230,
          orderid: 1514034709041,
          productid: 1513664401097,
          amount: 2,
          productname: '可口可乐',
          productprice: 3.0
        },
        {
          id: 1514034837112,
          orderid: 1514034836904,
          productid: 1513664401097,
          amount: 2,
          productname: '可口可乐',
          productprice: 3.0
        },
        {
          id: 1514037579551,
          orderid: 1514037579332,
          productid: 1513664361443,
          amount: 1,
          productname: '清风软抽',
          productprice: 5.8
        },
        {
          id: 1514038673689,
          orderid: 1514038673476,
          productid: 1513664361443,
          amount: 1,
          productname: '清风软抽',
          productprice: 5.8
        },
        {
          id: 1514084277939,
          orderid: 1514084277712,
          productid: 1513664401097,
          amount: 1,
          productname: '可口可乐',
          productprice: 3.0
        },
        {
          id: 1514084277945,
          orderid: 1514084277712,
          productid: 1513664361443,
          amount: 2,
          productname: '清风软抽',
          productprice: 5.8
        },
        {
          id: 1514084837805,
          orderid: 1514084837583,
          productid: 1513664468564,
          amount: 1,
          productname: '绿箭口香糖',
          productprice: 4.2
        }
      ],
      shops: [
        {
          id: 1513572900323,
          userid: 1513440680256,
          address: '上海市闵行区东川路800号上海交通大学软件学院',
          name: '安踏专卖店',
          longitude: 121.4251,
          latitude: 31.0221,
          description: '运动鞋专卖'
        },
        {
          id: 1513609597839,
          address: '上海市闵行区东川路800号',
          name: '小当家官方旗舰店',
          longitude: 131.1234,
          latitude: 31.4321,
          description: '小当家'
        },
        {
          id: 1513609685656,
          userid: 1513604163692,
          address: '上海市闵行区东川路800号',
          name: '小当家官方旗舰店',
          longitude: 131.1234,
          latitude: 31.4321,
          description: '小当家'
        },
        {
          id: 1513664290704,
          userid: 1513603791659,
          address: '上海市闵行区东川路800号上海交通大学',
          name: '全家便利店',
          longitude: 121.41956,
          latitude: 31.014372,
          description: '全家便利闵行交大店'
        },
        {
          id: 1513673581132,
          userid: 1513673519012,
          address: '上海市闵行区东川路2088号置业广场F3',
          name: '欧尚超市',
          longitude: 0.0,
          latitude: 0.0,
          description: '欧尚超市 闵行店'
        }
      ],
      orderList: [
        {
          id: 1,
          number: 12379796,
          product: '中华牙膏',
          time: '2017-12-12',
          price: '15',
          status: '已完成'
        },
        {
          id: 2,
          number: 12379797,
          product: ['中华牙膏', '清风软抽'],
          time: '2017-12-22',
          price: '15',
          status: '未完成'
        }
      ],
      orderListElement: {
        orderId: null,
        shopId: null,
        shopName: null,
        productsId: [],
        productsName: [],
        productsDisplay: '',
        totalCost: null,
        createtime: null,
        status: null
      }
    }
  },
  created: function() {
    this.initOrderList()
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (row.status === '已完成') {
        return 'success-row'
      }
      return ''
    },
    fetchData() {
      // this.selectedTutors = []
      // axios.all([
      //   axios({
      //     method: 'GET',
      //     url: apiConfig.userApi.tutor.url
      //   }),
      //   axios({
      //     method: 'GET',
      //     url: apiConfig.userApi.selection.url
      //   })
      // ]).then(axios.spread((res1, res2) => {
      //   if (res1.data.result && res2.data.result) {
      //     this.tutors = res1.data.data
      //     this.selections = res2.data.data
      //     // var offset = 0
      //     if (this.selections && this.tutors) {
      //       for (var i = 0, slength = this.selections.length; i < slength; i++) {
      //         if (this.selections[i].enable) {
      //           this.selectionIsDone = true
      //           this.selectionDone = this.selections[i]
      //         }
      //         for (var j = 0, tlength = this.tutors.length; j < tlength; j++) {
      //           if (this.tutors[j].tutorId === this.selections[i].tutorId) {
      //             this.newRecord.tutor = this.tutors[j]
      //             this.newRecord.selection = this.selections[i]
      //             this.selectedTutors.push(JSON.parse(JSON.stringify(this.newRecord)))
      //             this.tutors.splice(j, 1)
      //             // offset++
      //             break
      //           }
      //         }
      //       }
      //       // var _this = this
      //       // _this.selections.forEach(function (selection, index, selections) {
      //       //   _this.tutors.forEach(function (tutor, index, tutors) {
      //       //     // console.log(tutor)
      //       //     // alert(tutor)
      //       //     // console.log(tutors[index])
      //       //     _this.newRecord.tutor = tutor
      //       //     _this.newRecord.selection = selection
      //       //     if (tutor.tutorId === selection.tutorId) {
      //       //       _this.selectedTutors.push(_this.newRecord)
      //       //       _this.tutors.splice(index, 1)
      //       //     }
      //       //   })
      //       //   // console.log(this.isSelected)
      //       //   // console.log(this.isSelected[0])
      //       // })
      //     }
      //   } else {
      //     this.$Notice.open({
      //       title: '数据获取失败',
      //       desc: res1.data.message
      //     })
      //   }
      // }))
    },
    initOrderList () {
      this.orders.forEach(order => {
        this.orderListElement.shopId = null
        this.orderListElement.shopName = null
        this.orderListElement.productsId = []
        this.orderListElement.productsName = []
        this.orderListElement.productsDisplay = ''
        this.orderListElement.orderId = order.id
        this.orderListElement.totalCost = order.totalcost
        this.orderListElement.createtime = order.createtime
        this.orderListElement.status = order.status
        this.orderItems.forEach(orderItem => {
          if (order.id === orderItem.orderid) {
            this.orderListElement.productsId.push(orderItem.productid)
            this.orderListElement.productsName.push(orderItem.productname)
            if (this.orderListElement.productsName.length === 1) {
              this.orderListElement.productsDisplay = orderItem.productname
            } else if (this.orderListElement.productsName.length === 2) {
              this.orderListElement.productsDisplay += '、' + orderItem.productname
            } else if (this.orderListElement.productsName.length === 3) {
              this.orderListElement.productsDisplay += '等'
            }
          }
        })
        this.shops.forEach(shop => {
          if (order.senderid === shop.userid) {
            this.orderListElement.shopId = shop.id
            this.orderListElement.shopName = shop.name
          }
        })
        this.orderList.push(JSON.parse(JSON.stringify(this.orderListElement)))
      })
    }
  }
}
</script>
  
<style>
.order-container {
  margin-top: 50px;
  width: 1070px;
  /* height: 100%; */
  min-height: 500px;
  float: left;
  /* text-align: center; */
  /* border: 1px solid #DCDFE6; */
  background-color: #ffffff;
}
.order-content {
  margin-top: 50px;
  margin-bottom: 50px;
  width: 1000px;
  /* height: 800px; */
  margin-left: auto;
  margin-right: auto;
}
.order-holder {
  float: left;
  width: 1000px;
  height: 100px;
  /* background-color:blue; */
  padding: 10px;
  margin-top: 5px;
  box-sizing: border-box;
  border: 1px solid #e4e7ed;
  text-align: left;
}
.order-content-header {
  font-size: 15px;
  font-weight: 500;
  color: #606266;
}
.order-content-main {
  /* text-align: center; */
  margin-top: 15px;
  font-size: 12px;
  font-weight: 500;
}
.order-table {
  text-align: left;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.order-table .success-row {
  background: #f0f9eb;
}
</style>
  

